<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>选择列表</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
   <div id="app_select">
       <!--1、单选列表-->
       <!-- value不赋值，则默认使用option标签值-->
       <p>1、单选列表</p>
       <select v-model="interest">
           <option disabled value="">请选择</option>
           <option>篮球</option>
           <option value="Football">足球</option>
           <option value="Badminton">羽毛球</option>
           <option value="Rugby">橄榄球</option>
       </select>

       <p>选择的球类运动为：{{interest}}</p>
       <br>

       <!--2、多选列表，添加一个multiple属性-->
       <p>2、多选列表，添加一个multiple属性</p>
       <select v-model="words" multiple>
           <option value="a">A</option>
           <option value="BBB">b</option>
           <option>C</option>
       </select>
       <p>多选的字母为：{{words}}</p>

       <!--3、动态渲染-->
       <p>3、动态渲染下拉列表</p>
       <select v-model="family" multiple>
           <option disabled value="">请选择</option>
           <option v-for="item in items" v-bind:value="item.value" >
               {{item.key}}
           </option>

       </select>
       <p>动态显示的内容为：{{family}}</p>



   </div>

    <script>
        var app_select = new Vue({
            el:'#app_select',
            data:{
                interest:'',
                words:[],
                family:'',
                items:[
                    {key:'a',value:'tuweiya'},
                    {key:'b',value:'zhangmeimei'},
                    {key:'c',value:'yangjunqi '},
                ],

            }
        })
    </script>

</body>
</html>